<template>
	<div class="page" data-page="unitStatList" style="z-index: 2;">
		<div class="navbar">
  		   <div class="navbar-inner">
	            <div class="left"  @click=$root.backToTab(0)>
	                <a href="#" class="link">
	                  <i class="icon icon-back"></i>
	                  <span class="ios-only">Back</span>
	                </a>
	            </div>
	          	<div class="title sliding">单位列表</div>
                <div class="right">
                    <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-demo">
                        <i class="icon f7-icons ios-only">search_strong</i>
                        <i class="icon material-icons md-only">search</i>
                    </a>
                </div>
	          	<form data-search-container=".search-list" data-search-in=".item-title" class="custum searchbar searchbar-expandable searchbar-demo searchbar-init">
	          	  <div class="searchbar-inner">
	          	    <div class="searchbar-input-wrap">
	          	      <input type="search" placeholder="请输入关键字" style="color: white;font-size: 15px;">
	          	      <i class="searchbar-icon"></i>
	          	      <span class="input-clear-button"></span>
	          	    </div>
	          	    <span class="searchbar-disable-button">Cancel</span>
	          	  </div>
	          	</form>
	        </div>
		</div>
		<div  class="page-content unitStat-content">
			<div class="row unitStat-type">
			  <div class="col unitStat-type-select" @click="selectCurrentType(0)">全部</div>
			  <div class="col" @click="selectCurrentType(1)">报警</div>
			  <div class="col" @click="selectCurrentType(2)">故障</div>
			  <div class="col" @click="selectCurrentType(3)">屏蔽</div>
			  <div class="col" @click="selectCurrentType(4)">正常</div>
			</div>
			<div class="divider-line" style="margin-top: 41px;"></div>
			<div class="list search-list searchbar-found unitStat-list ">
			  	<ul>
				</ul>
            </div>
		</div>
	</div>
</template>
<style scoped>
	.unitStat-content .list ul:before{
        height: 0 !important;
	}
	.unitStat-container{
		width: 100%;
	    height: 83%;
	    position: fixed;
	    bottom: 0px;
	    overflow-y: auto;
	    z-index: 2;
	    background-color: #fff;
	}
    .unitStat-type{
	    width: 100%;
	    height: 40px;
	    line-height: 40px;
	    position: fixed;
        top: 56px;
        left: 0;
	    z-index: 3;
    }
    .unitStat-type div{
		text-align: center;
		font-size: 17px;
    }
    .unitStat-type-select{
    	color: #509dff;
    	border-bottom: 2px solid #509dff;
    }
    .unitStat-list{
        margin-top: 0px !important;
        position: fixed;
        width: 100%;
        height: calc(100% - 120px);
        overflow-y: scroll;
    }
    .unitStat-list .list ul:before{
    	height: 0px;
    }
    .unitStat-list .item-inner{
		display: inline-block;
		padding-right:10px !important;
    }
    .unitStat-list .row{
    	width: 100%;
    	font-size: 12px;
    	margin-top: 10px;
    }
    .unitStat-list img{
    	border-radius: 12px;
    }
    .unitStat-list .links-list a, .list .item-link .item-inner, .media-list .item-link .item-title-row, li.media-item .item-link .item-title-row{
		background-image:none;
    }
    .unitStat-list .row i{
    	font-size: 13px;
    	font-weight: bold;
    }
</style>
<script>
    return {
        mounted() {
            var self = this;
            self.fireTType=this.$route.params.UnitFireTType;
        },
        data: function () {
          return {
              fireTType:0,
              firettype:0
          }
        },
        methods: {
        	selectCurrentType:function(type){
        		var self = this;
        		var $ = self.$$;
        		$(".unitStat-type div").removeClass('unitStat-type-select').eq(type).addClass('unitStat-type-select');
                self.firettype=type;
        		self.getUnitStatData();
        	},
        	getUnitStatData:function(){
        		var self = this;
        		common.loading(1);
        		if (self.firettype==0){
                    self.fireTType=0;
				}else if(self.firettype==1){
                    self.fireTType=10;
				}
                else if(self.firettype==2){
                    self.fireTType=20;
                }
                else if(self.firettype==3){
                    self.fireTType=30;
                }
                else if(self.firettype==4){
                    self.fireTType=80;
                }
                jQuery(".unitStat-list ul").empty();
                Dao.UnitRealtimeState({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    orgIds:userInfor.organizationIds,
                    fireTType:self.fireTType,
                    pageIndex:0,
                    pageSize:100
                }, function(data){
                    if(data&& data.length>0){
                        $(".unitStat-list").removeClass('no-hairline-bottom');
                        for(var i=0; i<data.length;i++){
                            var url = "";
                            if(data[i].logoUrl){
                                url = data[i].logoUrl;
                            }else{
                                url = staticPath+"img/UnitRealtimeState/unit_all.png";
                            }
                            jQuery(".unitStat-list ul").append(`
                                <li>
                              <a href="/moreDectorState/0/`+ data[i].organizationId +`/`+data[i].organizationName+`/0/" class="item-link item-content " data-view=".view-main">
                                <div class="item-media">
                                    <img src="`+url+`" width="40"/>
                                </div>
                                <div class="item-inner">
                                  <div class="item-title">
                                    <div class="item-title" style="font-size: 14px">` + common.transNullundefined(data[i].organizationName) + `</div>
                                  </div>
                                  <div class="row">
                                        <div class="col-25">
                                            <i class="f7-icons" style="color: #fc4962;">circle</i>
                                            <span class="stat-type-name">报警</span>
                                            <span class="stat-type-num">`+common.transNullundefined(data[i].fireNum)+`</span>
                                        </div>
                                        <div class="col-25">
                                            <i class="f7-icons" style="color: #ffcd65;">circle</i>
                                            <span class="stat-type-name">故障</span>
                                            <span class="stat-type-num">`+common.transNullundefined(data[i].faultNum)+`</span>
                                        </div>
                                        <div class="col-25">
                                            <i class="f7-icons" style="color: #c8c6c7;">circle</i>
                                            <span class="stat-type-name">屏蔽</span>
                                            <span class="stat-type-num">`+common.transNullundefined(data[i].shieldNum)+`</span>
                                        </div>
                                        <div class="col-30">
                                            <i class="f7-icons" style="color: #37ef7d;">circle</i>
                                            <span class="stat-type-name">正常</span>
                                            <span class="stat-type-num">`+common.transNullundefined(data[i].normalNum)+`</span>
                                        </div>
                                  </div>
                                </div>
                              </a>
                            </li>`);
                        }
                        if(screen.width<370){
                            jQuery(".stat-type-name").hide();
                            jQuery(".unitStat-list .item-content").css({"padding-left":"5px","font-size": "12px"});
                        }
                        common.loading(0);
                    }else{
                        common.loading(0);
                        $(".unitStat-list ul").empty();
                        $(".unitStat-list").addClass('no-hairline-bottom');
                        $(".unitStat-list ul").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
					}
        		});
        	}
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                self.selectCurrentType(this.$route.params.UnitFireTType);
            }
        }
  }

</script>